<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../css/back.css">
    <link rel="stylesheet" href="../css/manage.css">
    <title>后台管理页</title>

</head>
    <script>
        $(function () {
            //登录下拉菜单
            $(".ui.dropdown").dropdown({
                allowAdditions: true //允许添加新的菜单项
            });
        });
    </script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted attached segment" style="padding-top: 5px;height: 70px;padding-left: 100px">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="main.html"  class="m-item active item" ><i class="home icon"></i>信息中心</a>
<!--            <a href=""  class="m-item item"><i class="idea icon"></i>分类</a>-->
<!--            <a href=""  class="m-item item" ><i class="clone icon"></i>归档</a>-->
<!--            <a href=""  class="m-item item"><i class="tags icon"></i>标签</a>-->

            <div class="ui right floated dropdown item">
                <div class="text">
                    <img v-bind:src="admin.imgAvatar" class="ui avatar image">
                    <strong >{{admin.username}}</strong>
                </div>
                <i class="ui dropdown icon"></i>
                <div class="menu">
                    <a href="#" class="item">个人中心</a>
                    <a href="/user/logout" class="item">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 中间内容 -->
    <div style="padding-top: 40px;">
        <div class="ui container" style="width: 90%">
            <!-- 搜索 -->
            <el-row>
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                    <el-form-item>
                        <el-input type="text" v-model="searchData.name" placeholder="姓名" />
                    </el-form-item>
<!--                    <el-form-item>-->
<!--                        <el-select v-model="searchData.typeId" placeholder="分类" id="El1">-->
<!--                            <el-option v-for="type of searchData.selectList" :label="type.name" :value="type.id" />-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item>
                        <el-input type="text" v-model="searchData.address" placeholder="地址" />
                    </el-form-item>
<!--                    <el-form-item>-->
<!--                        <el-checkbox label="推荐" v-model="searchData.recommend" />-->
<!--                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="findPage()">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-row>

            <!-- 文章展示表格 -->
            <!-- dataList查询出来的列表，header-cell-style表头颜色,使用reserve-selection属性必须配合row-key,selection-change:多选，当选择项发生变化时会触发该事件 -->
            <el-table height="400" border :data="page.content" v-loading="loading"
                      :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="id"
                      @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" label="全选" :reserve-selection="true" min-width="3%"></el-table-column>  <!-- reserve-selection选择其他页时，之前页选的的框依然存在 -->
                <el-table-column prop="name" label="姓名" min-width="13%"></el-table-column>
                <el-table-column prop="gender" label="性别" min-width="7%"></el-table-column>
                <el-table-column prop="age" label="年龄" min-width="7%"></el-table-column>
                <el-table-column prop="address" label="地址" min-width="26%"></el-table-column>
                <el-table-column prop="qq" label="qq账号" min-width="17%"></el-table-column>
                <el-table-column prop="email" label="邮箱地址" min-width="17%"></el-table-column>
                <el-table-column label="操作" min-width="11%">
                    <template slot-scope="scope">   <!-- 将整个行对象封装为scope -->
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="rowDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 按钮组 -->
            <div style="margin-top: 10px">
                <tr>
                    <th colspan="6">
                        <el-button type="info" @click="Previous()" plain :disabled="page.firstPage">上一页</el-button>
                        <el-button type="info" @click="Next()" plain :disabled="page.lastPage" >下一页</el-button>
                        <el-button @click="handleAdd()" icon="el-icon-plus" type="primary" style="float: right">新增</el-button>
                        <el-button @click="delAll()" type="danger" icon="el-icon-delete"  style="float: right;margin-right: 20px" :disabled="multipleSelection.length==0">
                            一键删除
                        </el-button>
                    </th>
                </tr>
            </div>
            <!-- 添加数据弹框 -->
            <div class="add-form">
                <el-dialog title="添加数据" :visible.sync="dialogFormVisible">
                    <el-form ref="dataAddForm":model="elAdd" :rules="rules" label-position="right" label-width="100px" :clearable="true">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="name"><el-input v-model="elAdd.name"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别" prop="gender"><el-input v-model="elAdd.gender"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年龄" prop="age"><el-input v-model="elAdd.age"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="地址" prop="address"><el-input v-model="elAdd.address"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="qq" prop="qq"><el-input v-model="elAdd.qq"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="email"><el-input v-model="elAdd.email"/></el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                        <el-button type="primary" @click="handleSave()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 修改i数据弹框 -->
            <div class="updata-form">
                <el-dialog title="修改数据" :visible.sync="dialogUpdateVisible">
                    <el-form ref="dataUpdateForm":model="elAUpdate" :rules="rules" label-position="right" label-width="100px" :clearable="true">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="name"><el-input v-model="elAUpdate.name"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别" prop="gender"><el-input v-model="elAUpdate.gender"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年龄" prop="age"><el-input v-model="elAUpdate.age"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="地址" prop="address"><el-input v-model="elAUpdate.address"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="qq" prop="qq"><el-input v-model="elAUpdate.qq"/></el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="email"><el-input v-model="elAUpdate.email"/></el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>


</div>

</body>
<!-- axios -->
<script src="../frame/axios/axios.min.js"></script>

<script src="../js/manage.js"></script>
</html>